<template>
  <div class="cluster systemContent">
    <a-card style="width:100%">
      <p slot="title" class="cardTitles">
        <span>系统设置</span>
      </p>
      <div class="main-content">
        <a-tabs type="card" @change="tabPaneChange">
          <a-tab-pane key="1" tab="短信设置">
            <div class="tab-content">
              <div v-for="(item,index) in list" :key="index">
                <div class="table-title">{{item.name}}-{{item.code}}</div>
                <a-table
                  :columns="columns"
                  :data-source="item.msgTemplateVOList"
                  rowKey="code"
                  bordered
                  :showHeader="false"
                  :pagination="false"
                >
                  <template slot-scope="text,record" slot="action">
                    <div v-if="record.showDisableMenu == true">
                      <a-button type="link" @click="messageConfig(record)">配置</a-button>
                    </div>
                    <div v-else>
                      <a-button type="link" @click="messageConfig(record)">配置</a-button>
                    </div>
                  </template>
                  <template slot-scope="text,record" slot="status">
                    <a-switch
                      checked-children="启用"
                      un-checked-children="禁用"
                      :disabled="disabled"
                      @change="(checked) => onChange(checked, record)"
                      :checked="record.state == 0"
                    />
                  </template>
                </a-table>
              </div>
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="其他设置">
            <div class="tab-content">
              <div class="content-title">
                <p>产品服务配置</p>
              </div>
              <div class="formDiv">
                <a-form layout="inline">
                  <a-form-item>
                    <a-input v-model="keywords" type="text" style="width: 180px;" />
                  </a-form-item>
                  <a-form-item>
                    <a-button @click="search()" type="primary">搜索</a-button>
                  </a-form-item>
                  <a-form-item>
                    <a-button @click="reset()">重置</a-button>
                  </a-form-item>
                </a-form>
                <div class="operation-btn">
                  <a-button @click="commonEvent(1,'')" type="primary" style="margin-right:15px">新增</a-button>
                  <a-button type="danger" @click="productDelete()">删除</a-button>
                </div>
              </div>
              <div style="margin-top:10px">
                <a-table
                  :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                  :columns="productColumns"
                  :data-source="productList"
                  rowKey="id"
                  :pagination="pagination"
                  @change="productChangePage"
                >
                  <template slot-scope="text,record" slot="productAction">
                    <a class="tools" @click="commonEvent(2, record.id)">编辑</a>
                    <a class="tools" type="link" @click="productDelete(record)">删除</a>
                  </template>
                </a-table>
              </div>
              <div class="content-title">
                <p>默认密码配置</p>
              </div>
              <div class="password-config">
                <a-form-model layout="inline" ref="ruleForm" :model="ruleForm" :rules="rules">
                  <a-form-model-item label="默认密码" prop="password" v-show="isPasswordEdit===false">
                    <span>{{ruleForm.password}}</span>
                    <i @click="passwordEdit()" class="iconfont iconbianji1"></i>
                  </a-form-model-item>
                  <a-form-model-item v-show="isPasswordEdit===true" label="默认密码" prop="password">
                    <a-input
                      v-model="ruleForm.password"
                      type="text"
                      style="width:200px;margin-right:15px;"
                    />
                    <i @click="submitForm('ruleForm')" class="iconfont iconsuccess"></i>
                    <i @click="emptyData()" class="iconfont iconerror"></i>
                  </a-form-model-item>
                </a-form-model>
              </div>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
    <div class="modal-content">
      <messageConfig
        :id="configId"
        :code="code"
        :messageConfigVisible="messageConfigVisible"
        @updateMessage="updateMessage"
        @closeFunc="messageConfigVisible=false"
      ></messageConfig>
      <productServe
        :id="id"
        :optFlag="optFlag"
        :title="title"
        :productServeVisible="productServeVisible"
        @updateInform="updateInform"
        @closeFunc="productServeVisible=false"
      ></productServe>
    </div>
  </div>
</template>

<script>
import messageConfig from "components/configuration/system/messageConfig";
import productServe from "components/configuration/system/productServe";
import { updatePassword, getDefaultPassword } from "@/api/system";
import { messageTemplate, instantMsg } from "@/api/message";
import { paging } from "assets/js/mixin";
export default {
  mixins: [paging],
  components: {
    messageConfig,
    productServe
  },
  data() {
    return {
      id: "",
      code: "",
      configId: "",
      title: "",
      optFlag: 1,
      disabled: false,
      columns: [
        {
          title: "编号",
          dataIndex: "code",
          width: 180
        },
        {
          title: "名称",
          dataIndex: "name",
          width: 200
        },
        {
          title: "是否开启",
          dataIndex: "state",
          align: "center",
          scopedSlots: { customRender: "status" },
          width: 100
        },
        {
          title: "短信模板",
          dataIndex: "action",
          align: "center",
          width: 120,
          scopedSlots: { customRender: "action" }
        }
      ],
      list: [],
      messageConfigVisible: false,
      selectedRowKeys: [],
      productList: [],
      productColumns: [
        {
          title: "产品名称",
          dataIndex: "name"
        },
        {
          title: "跳转地址",
          dataIndex: "indexUrl"
        },
        {
          title: "操作",
          dataIndex: "productAction",
          width: 240,
          scopedSlots: { customRender: "productAction" }
        }
      ],
      keywords: "",
      isPasswordEdit: false,
      ruleForm: {
        password: "",
      },
      storagePassword:"",
      rules: {
        password: [{
            validator: (rule, value, callback) => {
              const whiteSpace = /^[^ ]+$/;
              if (value && !whiteSpace.test(value)) {
                callback(new Error("输入内容不能有空格"));
              } else {
                callback();
              }
            },
            trigger: ["blur", "change"]
          },
          {
            required: true,
            message: "请输入重置密码",
            trigger: "blur"
          }
        ]
      },
      productServeVisible: false,
      checked: false
    };
  },
  mounted() {
    //短信设置
    this.getList();
  },
  methods: {
    tabPaneChange(activeKey) {
      if (activeKey == 1) {
        //短信设置
        this.getList();
      } else {
        this.isPasswordEdit = false
        //其他设置
        this.getProductList();
        //获取默认密码
        this.getDefaultPassword();
      }
    },
    getList() {
      messageTemplate
        .list()
        .then(res => {
          this.list = res.data.data;
        })
        .catch(err => {
          this.$message.destroy();
          this.$message.error(err);
        });
    },
    getProductList() {
      var params = {
        searchWord: this.keywords,
        filterColumns: [],
        current: this.pageNum,
        size: this.pageSize
      };
      instantMsg.list(params).then(res => {
        this.productList = res.data.data.records;
      });
    },
    getDefaultPassword() {
      getDefaultPassword().then(res => {
        this.ruleForm.password = res.data.data;
        this.storagePassword = res.data.data
      });
    },
    //搜索
    search() {
      this.pageNum = 1;
      this.pagination.current = 1;
      this.getProductList();
    },
    reset() {
      this.keywords = "";
      this.pageNum = 1;
      this.pagination.current = 1;
      this.getProductList();
    },
    commonEvent(optFlag, id) {
      this.id = id;
      this.optFlag = optFlag;
      if (this.optFlag == 1) {
        this.title = "新增产品服务";
      } else {
        this.title = "编辑产品服务";
      }
      this.productServeVisible = true;
    },
    productDelete(record) {
      let ids = [];
      var _this = this;
      if (!record && this.selectedRowKeys.toString().length == 0) {
        _this.$message.destroy();
        _this.$message.warning("请在列表中选择要操作的记录！");
        return;
      }
      if (!record) {
        _this.numbers = this.selectedRowKeys.length;
        ids = this.selectedRowKeys;
      } else {
        _this.numbers = 1;
        ids.push(record.id);
      }
      //列表删除操作
      this.$confirm({
        title: "您是否确认要删除所选中的记录？",
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          instantMsg
            .remove(ids)
            .then(() => {
              _this.$message.destroy()
              _this.$message.success("操作成功");
              _this.deleteAfterPageNum(_this.numbers);
              _this.getProductList();
            })
            .catch(err => {
            _this.$message.destroy();
            _this.$message.error(err);
            });
        }
      });
    },
    passwordEdit() {
      this.isPasswordEdit = true;
    },
    productChangePage(pagination) {
      this.pageNum = pagination.current;
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getProductList();
    },
    changePage() {},
    onChange(checked, record) {
      // var _this = this;
      //  this.$confirm({
      //   title: record.flag == 1 ? '是否启用？' : '是否禁用？',
      //   okText: "确定",
      //   okType: "danger",
      //   cancelText: "取消",
      //   onOk() {
      //     if (checked) {
      //   record.flag = 0;
      //   _this.enableUser(record);
      // } else {
      //   record.flag = 1;
      //   _this.disableUser(record);
      // }
      //   }
      //  });
      if (checked) {
        record.state = 0;
      } else {
        record.state = 1;
      }
      //获取短信消息模板详情
      messageTemplate.detail(record.code).then(res => {
        let data = res.data.data;
        if (null != data) {
          this.updateState(record);
        } else {
          record.state = 1;
          this.$message.warning("短信模板为空,无法改变状态");
        }
      });
    },
    updateState(data) {
      messageTemplate
        .updateState(data)
        .then(res => {
          this.$message.destroy()
          this.$message.success(res.data.msg);
          this.getList();
        })
        .catch(err => {
          this.$message.destroy()
          this.$message.error(err.response.data.message);
        });
    },
    //短信配置
    messageConfig(record) {
      this.code = record.code;
      this.configId = record.id;
      this.messageConfigVisible = true;
    },
    onSelectChange(selectedRowKeys) {
      //列表多选操作
      this.selectedRowKeys = selectedRowKeys;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.isPasswordEdit = false;
        } else {
          return false;
        }
        var params = Object.assign({}, this.ruleForm);
        //提交修改的密码
        this.onSubmitPassword(params);
      });
    },
    onSubmitPassword(params) {
      updatePassword(params).then(() => {});
    },
    //保存修改数据后刷新列表 关闭抽屉
    updateInform() {
      this.getProductList();
      this.productServeVisible = false;
    },
    updateMessage() {
      this.getList();
      this.messageConfigVisible = false;
    },
    //清空数据
    emptyData() {
      this.$refs["ruleForm"].resetFields()
      this.isPasswordEdit = false
      this.ruleForm.password = this.storagePassword;
      // this.ruleForm.password = "";
    }
  }
};
</script>

<style lang="stylus" scoped>
.systemContent
  .formDiv
    position: relative
  .password-config
    span
      margin-right: 15px
    i
      color: #1890ff
      font-size: 16px
      cursor: pointer
      margin: 0 10px
  .operation-btn
    position: absolute
    top: 0
    right: 0
  .table-content
    border-top: 0px solid #e8e8e8
  .content-title
    font-size: 18px
    margin-bottom: 30px
    margin-top: 20px
    padding-left: 15px
    border-left: 5px solid #1890ff
    p
      font-weight: bold
  .table-title
    padding-left: 10px
    box-sizing: border-box
    height: 42px
    line-height: 42px
    border: 1px solid #e8e8e8
    border-bottom: none
    border-top: none
    font-weight: bold
    font-size: 14px
    background: #f2f2f2
</style>